<template>
    <div>
        <h3>我的订单</h3>
       <el-divider></el-divider>
         <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="当前订单(待支付)" name="current">
  
         <div class="order_box" v-if="JSON.stringify(unPaid) != '{}'">
             <div class="order_header">
                 <span style="color: #999;font-size:14px;">梓晨订单号：{{unPaid.orderId}}</span>
             </div>
             <div class="order_body">
                 <h4 style="margin-left:-5px">《{{unPaid.filmName}}》</h4>
                 <div style="color:#999;font-size:13px">{{unPaid.hallName}} {{unPaid.seat}}</div>
                 <div style="color:#f03d37;font-size:13px">{{unPaid.orderTime}}</div>
             </div>
             <div class="order_price">￥ {{unPaid.orderPrice}}</div>
             <div class="order_status">
                 <span style="color:red" v-if="unPaid.orderStatus == 1">待支付</span>
                 <span style="color:grey" v-if="unPaid.orderStatus == 0">已取消</span>
                 <span style="color:green" v-if="unPaid.orderStatus == 2">已支付</span>
            </div>
             <div class="actions"><el-button type="primary" @click="toPay">支付</el-button></div>
         </div>
         <div v-else>
             暂无数据
         </div>
         
    </el-tab-pane>
    <el-tab-pane label="已取消订单" name="canceled">
              <div v-for="(item,i) in canceled" :key="i">
        <div class="order_box">
             <div class="order_header">
                 <span style="color: #999;font-size:14px;">梓晨订单号：{{item.orderId}}</span>
             </div>
             <div class="order_body">
                 <h4 style="margin-left:-5px">《{{item.filmName}}》</h4>
                 <div style="color:#999;font-size:13px">{{item.hallName}} {{item.seat}}</div>
                 <div style="color:#f03d37;font-size:13px">{{item.orderTime}}</div>
             </div>
             <div class="order_price">￥ {{item.orderPrice}}</div>
             <div class="order_status">
                 <span style="color:red" v-if="item.orderStatus == 1">待支付</span>
                 <span style="color:grey" v-if="item.orderStatus == 0">已取消</span>
                 <span style="color:green" v-if="item.orderStatus == 2">已支付</span>
            </div>
         </div>
              </div>
    </el-tab-pane>
    <el-tab-pane label="已支付订单" name="paid">
        <div v-for="(item,i) in paid" :key="i">
        <div class="order_box">
             <div class="order_header">
                 <span style="color: #999;font-size:14px;">梓晨订单号：{{item.orderId}}</span>
             </div>
             <div class="order_body">
                 <h4 style="margin-left:-5px">《{{item.filmName}}》</h4>
                 <div style="color:#999;font-size:13px">{{item.hallName}} {{item.seat}}</div>
                 <div style="color:#f03d37;font-size:13px">{{item.orderTime}}</div>
             </div>
             <div class="order_price">￥ {{item.orderPrice}}</div>
             <div class="order_status">
                 <span style="color:red" v-if="item.orderStatus == 1">待支付</span>
                 <span style="color:grey" v-if="item.orderStatus == 0">已取消</span>
                 <span style="color:green" v-if="item.orderStatus == 2">已支付</span>
            </div>
         </div>
              </div>
    </el-tab-pane>
  </el-tabs>
    </div>
</template>
<script>
export default {
data(){
return{
    activeName:'current',
    unPaid:{},
    canceled:[],
    paid:[]
}
},

created(){
     this.getMyOrder()
},
methods:{
    toPay(){
        this.$router.push(
            {path:'/order',query:{id:this.unPaid.id}}
        )
    },
    async getMyOrder(){
        const {data:res} = await this.$http.get('/common/order/getMyOrder',{params:{id:sessionStorage.getItem('memberId')}})
        if(res.code != 200){
         return this.$message.error(res.message)
        }
        else{
            res.data.forEach(element => {
                if(element.orderStatus == 0){
                    this.canceled.push(element)
                }
                else if(element.orderStatus == 1){
                    this.unPaid = element
                }
                else{
                    this.paid.push(element)
                }
            });
            console.log(JSON.stringify(this.unPaid))
        }
    }
},

}
</script>
<style lang="less" scoped>
.order_header{
    height:33px;
    line-height:33px;
    background-color: #f7f7f7;
}
.order_box{
    margin-bottom: 20px;
}
.order_body{
    line-height: 1.6;
    width:49%;
    display:inline-block
}
.order_price{
    display:inline-block;
    width: 12%;
    vertical-align: top;
    line-height: 4;
}
.order_status{
    display:inline-block;
    width: 15%;
    vertical-align: top;
    line-height: 4;
}
.actions{
    display:inline-block;
    vertical-align: top;
    line-height: 4;
}
</style>